<template>
  <div class="container">
    <div class="title-wrap">
      <h2 class="label">{{$t('user.invitationRecords')}}</h2>
    </div>
    <Table width="1016" :loading="loading" v-if="dataList.length > 0" :columns="columns" :data="dataList">
      <div slot="loading">
        <t-loading></t-loading>
      </div>
    </Table>
    <t-no-data v-if="!loading && dataList.length == 0"></t-no-data>
    <div class="page">
      <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage" :page-size="form.pageSize" show-sizer/>
    </div>
  </div>
</template>
<script>
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import {inviteLogList} from "@/api/invite";

export default {
  components: {TNoData, TLoading},
  data () {
    return {
      loading: false,
      dataList: [],
      form: {
        expressOrderNo: '', // 运单
        pageNo: 1, // 页
        pageSize: 20, // 页数
        status: '' // 运单状态
      },
      columns: [
        {
          title: this.$t('user.invitationTime'),
          key: 'createTime',
          fixed: 'left',
          width: 180
        },
        {
          title: this.$t('user.invitationCode'),
          key: 'inviteCode',
          width: 150
        },
        {
          title: this.$t('user.invitingUserID'),
          key: 'newUserId',
          width: 150
        },
        {
          title: this.$t('user.promoter'),
          key: 'inviterUsername',
          width: 150
        },
        {
          title: this.$t('user.promoterID'),
          key: 'inviter',
          width: 150
        },
        {
          title: this.$t('user.countryRegistration'),
          key: 'country',
          width: 150
        }
      ],
      totalPage: 1
    }
  },
  created() {
    this.getDataList();
  },
  methods: {
    filterStatue(type) {
      let typeText = '';
      switch (type) {
        case 'audit':
          typeText = '等待审核'
          break;
        case 'refusal':
          typeText = '拒绝提现'
          break;
        case 'processing':
          typeText = '等待打款'
          break;
        case 'success':
          typeText = '提现成功'
          break;
        case 'failed':
          typeText = '提现失败'
          break;
        default:
          break;
      }

      return typeText;
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onPage(index) {
      // 下一页
      this.form.pageNo = index;
      this.getDataList();
    },
    getDataList() {
      // 邀请记录
      this.loading = true;
      inviteLogList(this.form).then((res)=>{
        this.dataList = res.result.records;
        this.totalPage = res.result.total;
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="less">
.title-wrap {
  display: flex;
  justify-content: space-between;
  color: @t-title-color;
  margin-bottom: 16px;
  .record {
    cursor: pointer;
    color: @primary-color;
    font-size: 14px;
  }
}
.page {
  text-align: right;
  margin: 30px;
}
</style>